<template>
  <div class="container">
    <Breadcrumb :items="[
      'menu.pay.internetofthings',
      'menu.pay.internetofthings.carpark',
      'menu.internetofthings.alarmEvent',
    ]" />
    <a-card class="general-card" :title="$t('menu.internetofthings.alarmEventList')">
      <a-row>
        <a-col :flex="1">
          <a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="left">
            <a-row :gutter="16">
              <a-col  :span="8">
                <a-form-item label="项目场地" field="shopId">
                  <a-select
                      v-model="formModel.scenes"
                      :options="scenesOptions"
                      placeholder="请选择场景"
                      @change="handleAreaSearch('')"
                      allow-clear
                  />
                  <a-select v-model="formModel.areaId" :loading="loading" placeholder="输入场地项目名" allow-search :allow-clear=true
                            :filter-option="false" @search="handleAreaSearch" @change="areaChange">
                    <a-option v-for="item of areaList" :key="item?.id" :value="item?.id">{{ item.name }}</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="通道" field="checkPointId">
                  <a-select
                      v-model="formModel.checkPointId"
                      placeholder="请选择"
                      allow-clear
                  >
                    <a-option
                        :value="item.id"
                        v-for="item in checkPointList"
                        :key="item.id"
                    >{{ item.name }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="报警类型"
                    field="alarmType"
                    validate-trigger="input"
                >
                  <a-select
                      v-model="formModel.alarmType"
                      placeholder="请选择"
                      allow-clear
                  >
                    <a-option
                        :value="item.value"
                        v-for="item in alarmTypeArr"
                        :key="item.value"
                    >{{ item.label }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 40px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <!-- <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              {{ $t('searchTable.form.reset') }}
            </a-button> -->
          </a-space>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
<!--            <a-button type="primary" @click="handleAdd">-->
<!--              <template #icon>-->
<!--                <icon-plus />-->
<!--              </template>-->
<!--              {{ $t('searchTable.operation.create') }}-->
<!--            </a-button>-->
<!--            <a-button @click="showPackageImport">-->
<!--              {{ $t('searchTable.operation.import') }}-->
<!--            </a-button>-->
          </a-space>
        </a-col>
        <a-col :span="12" style="display: flex; align-items: center; justify-content: end">
<!--          <a-button>-->
<!--            <template #icon>-->
<!--              <icon-download />-->
<!--            </template>-->
<!--            {{ $t('searchTable.operation.download') }}-->
<!--          </a-button>-->
        </a-col>
      </a-row>
      <a-table row-key="id" :columns="columns" :data="state.list" :style="{ height: '700px' }" :pagination="pagination"
        :loading="loading" @page-change="pageChange">
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
        </template>
        <template #imagesUrl="{ record }">
          <a-image
              :src="record.imagesUrl"
              :width="80"
              :height="30"
          ></a-image>
        </template>
        <template #objectImagesUrl="{ record }">
          <a-image
              :src="record.objectImagesUrl"
              :width="80"
              :height="30"
          ></a-image>
        </template>
        <template #operations="{ record }">
          <a-dropdown trigger="click" :popup-max-height="false">
            <a-link>操作</a-link>
            <template #content>
              <a-doption>
                <a-space @click="getUseLogImages(record)">
                  <icon-eye />
                  <span> 显示图片 </span>
                </a-space>
              </a-doption>
<!--              <a-doption>-->
<!--                <a-space @click="handleEdit(record)">-->
<!--                  <icon-edit />-->
<!--                  <span> 编辑 </span>-->
<!--                </a-space>-->
<!--              </a-doption>-->
<!--              <a-doption>-->
<!--                <a-space @click="cancelOut(record)">-->
<!--                  <icon-close-circle />-->
<!--                  <span> 取消出场 </span>-->
<!--                </a-space>-->
<!--              </a-doption>-->
<!--              <a-doption>-->
<!--                <a-space @click="showFeeIllustrate(record)">-->
<!--                  <icon-close-circle />-->
<!--                  <span> 收费原因 </span>-->
<!--                </a-space>-->
<!--              </a-doption>-->
            </template>
          </a-dropdown>
        </template>
      </a-table>
    </a-card>
    <editAdd ref="editAddRef" @fetch-data="fetchData" />
    <packageImport ref="packageImportRef" @fetch-data="fetchData" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import {
  deleteReleaseLog,
  cfCarParkSearch,
  getReleaseLogListByQuery,
  getAlarmEventListByQuery,
  cfChargingStationSearch,
  getCarParkUseLogImages,
  getAlarmEventImageByUseLogId
} from '@/api/internetOfThings';
import editAdd from './editAdd.vue';
import packageImport from './packageImport.vue';
import {parseTime} from "@/utils";
import {cfCheckPointGet} from "@/api/park";
import {cfUserQuicklySearchUser} from "@/api/user";
import {cfVillageSearch} from "@/api/wisdomCommunity";
import {quicklySearchCouponActivity} from "@/api/pay";

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
});
const loading = ref(false);
const selectLoading = ref(false);

const editAddRef = ref();
const packageImportRef = ref();
const checkPointList = ref([]);
const userList = ref([]);

//状态(0-待执行/1-执行成功/2-执行失败)
const statusTypeArr = [
  { value: 0, label: '待执行' },
  { value: 1, label: '执行成功' },
  { value: 2, label: '执行失败' },
];
//警报类型(0-车辆滞留/1-人员滞留/2-车辆折返/3-车辆跟车/4-人员拥堵/5-非机动车滞留/6-车辆拥堵/7-电动车进梯/8-人员尾随/9-非法车辆入场/10-非法人员入场/11-未佩戴安全帽/12-未佩戴口罩)
const alarmTypeArr = [
  { value: 0, label: '车辆滞留' },
  { value: 1, label: '人员滞留' },
  { value: 2, label: '车辆折返' },
  { value: 3, label: '车辆跟车' },
  { value: 4, label: '人员拥堵' },
  { value: 5, label: '非机动车滞留' },
  { value: 6, label: '车辆拥堵' },
  { value: 7, label: '电动车进梯' },
  { value: 8, label: '人员尾随' },
  { value: 9, label: '非法车辆入场' },
  { value: 10, label: '非法人员入场' },
  { value: 11, label: '未佩戴安全帽' },
  { value: 12, label: '未佩戴口罩' },
];
//使用场景(0-人脸门禁/1-停车场/2-商城/3-充电/4-洗车/5-加油)
const scenesOptions = [
  {
    label: '人脸门禁',
    value: 0,
  },
  {
    label: '停车场',
    value: 1,
  },
  {
    label: '商城',
    value: 2,
  },
  {
    label: '充电',
    value: 3,
  },
  {
    label: '洗车',
    value: 4,
  },
  {
    label: '加油',
    value: 5,
  }
];

const columns = [
  {
    title: '场地/项目',
    dataIndex: 'areaName',
  },
  {
    title: '通道名称',
    dataIndex: 'checkPointName',
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
  },
  {
    title: '发生时间',
    dataIndex: 'newCreateTime',
  },
  {
    title: '对象编号',
    dataIndex: 'objectNumber',
  },
  {
    title: '警报类型',
    dataIndex: 'newAlarmType',
  },
  {
    title: '场景',
    dataIndex: 'newScenes',
  },
  {
    title: '现场图',
    dataIndex: 'imagesUrl',
    slotName: 'imagesUrl',
  },
  {
    title: '目标图',
    dataIndex: 'objectImagesUrl',
    slotName: 'objectImagesUrl',
  },
  {
    title: '操作',
    dataIndex: 'operations',
    slotName: 'operations',
  },
];
const areaList = ref([]);
const state = reactive({
  list: [],
});
const generateFormModel = () => {
  return {
    plateNumber: '',
    areaId: '',
    checkPointId: '',
    scenes: 1,
    alarmType: '',
  };
};
const formModel = ref(generateFormModel());

onMounted(() => {
  fetchData();
});
const showPackageImport = () => {
  packageImportRef.value.handleClick();
}
/**
 * 搜索项目（判断类型）
 * @param value
 */
const handleAreaSearch = async (value: any) => {
  if(formModel.value.scenes==1){
    //停车
    const { data, code } = await cfCarParkSearch({
      params: {
        name: value,
        page: 1,
        size: 200,
      },
    });
    if (code === 10002) {
      areaList.value = data;
    } else {
      areaList.value = [];
    }
  } else if(formModel.value.scenes==3){
    //充电
    const { data, code } = await cfChargingStationSearch({
      params: {
        stationName: value,
        page: 1,
        size: 200,
      },
    });
    if (code === 10002) {
      areaList.value = data;
    } else {
      areaList.value = [];
    }
  } else if(formModel.value.scenes==6){
    //智慧社区
    const { data, code } = await cfVillageSearch({
      params: {
        name: value,
        page: 1,
        size: 200,
      },
    });
    if (code === 10002) {
      areaList.value = data;
    } else {
      areaList.value = [];
    }
  }else{
    //其它暂不支持
    areaList.value = [];
  }

};

const getUseLogImages = async (useLog: any) => {
  const { data, code, message } = await getAlarmEventImageByUseLogId({
    params: {
      useLogId: useLog.id
    },
  });
  if (code === 10002) {
    useLog.imagesUrl = data.imagesUrl
    useLog.objectImagesUrl = data.objectImagesUrl
  } else {
    // @ts-ignore
    // Message.error(message);
  }
};

const handleSearch = async (value: any) => {
  const { data, code } = await cfUserQuicklySearchUser({
    params: {
      phone: value,
      page: 1,
      size: 20,
    },
  });
  if (code === 10002) {
    userList.value = data;
  } else {
    userList.value = [];
  }
};
const pageChange = (e: number) => {
  pagination.current = e;
  fetchData();
};
const areaChange = async (value: any) => {
  if (value) {
    selectLoading.value = true;
    const { data, code } = await cfCheckPointGet({
      params: {
        areaId: value,
        page: 1,
        size: 200,
      },
    });
    selectLoading.value = false;
    if (code === 10002) {
      checkPointList.value = data;
    } else {
      checkPointList.value = [];
    }
  } else {
    checkPointList.value = [];
  }
};
const handleAdd = () => {
  editAddRef.value.handleClick();
};
const handleEdit = (e: any) => {
  editAddRef.value.handleClick(e);
};
const search = () => {
  pagination.current = 1;
  fetchData();
};
const onDelete = async (id: string) => {
  await deleteReleaseLog({ params: { id } });
  fetchData();
};
const checkParams = (obj: any) => {
  // eslint-disable-next-line no-restricted-syntax, guard-for-in
  for (const i in obj) {
    if (!obj[i]) {
      if (obj[i] !== 0) {
        obj[i] = null;
      }
    }
  }
  return obj;
};
const fetchData = async () => {
  loading.value = true;
  // @ts-ignore
  const { data, code, total } = await getAlarmEventListByQuery({
    params: checkParams({
      page: pagination.current,
      size: pagination.pageSize,
      plateNumber: formModel.value.plateNumber,
      areaId: formModel.value.areaId,
      scenes: formModel.value.scenes,
      orderByDesc: 'create_time',
      alarmType: formModel.value.alarmType,
      checkPointId: formModel.value.checkPointId
    }),
  });
  loading.value = false;
  if (code === 10002) {
    // @ts-ignore
    if (total) pagination.total = total;
    for (const i of data) {
      i.newCreateTime = parseTime(i.createTime) || '-';
      for(const _alarmType of alarmTypeArr){
        if(_alarmType.value==i.alarmType){
          i.newAlarmType = _alarmType.label;
        }
      }
      for(const _scenes of scenesOptions){
        if(_scenes.value==i.scenes){
          i.newScenes = _scenes.label;
        }
      }
    }
    state.list = data;
  } else {
    state.list = [];
  }
  // console.log(data, code, 999);
};
</script>

<script lang="ts">
export default {
  name: 'SearchTable',
};
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
</style>
